<template>
    <a-form ref="formRef" name="dynamic_form_nest_item" :model="Version" :label-col="{ style: { width: '80px' } }">
        <a-form-item :name="'version'" label="版本号">
            <a-input v-model:value="Version.version" />
        </a-form-item>
        <a-form-item :name="'date'" label="更新时间">
            <a-input v-model:value="Version.date" disabled />
        </a-form-item>
        <a-form-item label="文件" :validateStatus="FileValidate.status" :help="FileValidate.help">
            <a-upload directory :show-upload-list="false" v-model:file-list="FileList" :before-upload="()=>{return false}">
                <a-button>
                    <UploadOutlined /> {{FileList.length ? '已上传 ' + FileList.length + ' 个文件' : '未上传文件' }}
                </a-button>
            </a-upload>
        </a-form-item>
        <a-form-item label="更新" v-if="!Version.update.length">
            <span v-if="!Version.update.length">暂无数据</span>
        </a-form-item>
        <a-form-item v-for="(item, index) in Version.update" :name="['update', index]" :label="(index == 0 ? '更新 1' : index + 1 )" :rules="{ 
            required: true, message: '请输入注释', 
        }">
            <a-space>
                <a-input style="width:350px" v-model:value="Version.update[index]" />
                <MinusCircleOutlined @click="Version.update.splice(index, 1)" />
            </a-space>
        </a-form-item>
        <a-form-item label=" " :label-col="{ style: { width: '80px',opacity: 0 } }">
            <a-button type="dashed" @click="Version.update.push('')">
                <PlusOutlined /> 添加 更新
            </a-button>
        </a-form-item>
        <a-form-item label="修复" v-if="!Version.debug.length">
            <span v-if="!Version.debug.length">暂无数据</span>
        </a-form-item>
        <a-form-item v-for="(item, index) in Version.debug" :name="['debug', index]" :label="(index == 0 ? '修复 1' : index + 1)" :rules="{ 
            required: true, message: '请输入注释', 
        }">
            <a-space>
                <a-input style="width:350px" v-model:value="Version.debug[index]" />
                <MinusCircleOutlined @click="Version.debug.splice(index, 1)" />
            </a-space>
        </a-form-item>
        <a-form-item label=" " :label-col="{ style: { width: '80px',opacity: 0 } }">
            <a-button type="dashed" @click="Version.debug.push('')">
                <PlusOutlined /> 添加 修复
            </a-button>
        </a-form-item>
    </a-form>
</template>
<script setup>
import { reactive, ref, watch, nextTick } from 'vue';
import MinusCircleOutlined from '@ant-design/icons-vue/MinusCircleOutlined';
import PlusOutlined from '@ant-design/icons-vue/PlusOutlined';
import UploadOutlined from '@ant-design/icons-vue/UploadOutlined';
import { saveAs } from './SaveAs'
import { Form } from 'ant-design-vue';
import JSZip from "jszip";

const props = defineProps({  //获取传参的数据
    Version: Object,
})


const formRef = ref();
const FileList = ref([]);

const FileValidate = ref({
    status: '',
    help: '',
})

const ClearFiles = () => {
    FileList.value = [];
    nextTick(() => {
        FileValidate.value = {
            status: '',
            help: ''
        }
    })
}

watch(() => FileList.value, (value) => {
    if (value.length) {
        FileValidate.value = {
            status: '',
            help: ''
        }
    } else {
        FileValidate.value = {
            status: 'error',
            help: '未上传文件'
        }
    }
}, { deep: true });


const readFile = (file) => {
    return new Promise((resolve, reject) => {
        const index = file.webkitRelativePath.indexOf('/');
        const length = file.webkitRelativePath.length;
        const path = file.webkitRelativePath.slice(index + 1, length);
        const reader = new FileReader();
        reader.onload = function () {
            resolve({ path, result: reader.result });
        };
        reader.readAsArrayBuffer(file);
    });
}

const Sublimt = async (callback) => {
    try {
        if (!FileList.value.length) {
            FileValidate.value = {
                status: 'error',
                help: '未上传文件'
            }
            return;
        } else {
            const zip = new JSZip();
            for (let i = 0; i < FileList.value.length; i++) {
                const file = FileList.value[i].originFileObj;
                const _obj = await readFile(file);
                zip.file(_obj.path, _obj.result);
            };
            var content = await zip.generateAsync({ type: "base64" });
        }
        const values = await formRef.value.validateFields();
        callback({ ...values, file: content });
    } catch (errorInfo) {
        console.log('Failed:', errorInfo);
    }
};

defineExpose({
    Sublimt,
    ClearFiles
});

</script>
<style scoped>
a {
    opacity: 0;
}
</style>